<template>
  <div id="the_chart_editor">
    <div class="list">
      <md-list :md-expand-single="true" style="width:100%;">
        <md-list-item md-expand>
          <md-icon>
            <i class="iconfont icon56"></i>
          </md-icon>
          <span class="md-list-item-text">{{
            getLangText(label.dataPackage)
          }}</span>
          <div
            slot="md-expand"
            :style="{
              overflowY: 'auto',
              height: listHeight,
              overflowX: 'hidden'
            }"
          >
            <div style="padding:0 8px;">
              <!-- 选择数据包 start -->
              <md-field>
                <label>{{ getLangText(label.dataPackage) }}</label>
                <md-input v-model="searchData"></md-input>
                <md-button class="md-icon-button" @click="searchDataPackage">
                  <i class="iconfont iconsearch"></i>
                </md-button>
              </md-field>
              <md-card
                style="position:absolute;z-index:9;margin:0;width:280px;height:300px;overflow-y:auto;overflow-x:hidden;"
                v-show="isSearchData"
              >
                <div
                  class="list-item"
                  v-for="(item, idx) in dataPackages"
                  @click="selectDataPackage(idx)"
                  v-show="dataPackages.length > 0"
                  :key="idx"
                >
                  <i class="iconfont icon56"></i>
                  <span class="list-item-text">{{ item.title }}</span>
                  <span class="list-item-tip md-caption"
                    >({{ item.source_id }})</span
                  >
                </div>
                <md-card-header v-if="dataPackages.length == 0 || isSearchNone">
                  <div class="md-body-1">{{ getLangText(label.nodata) }}</div>
                </md-card-header>
              </md-card>
              <md-card
                style="margin:0px;margin-top:16px;"
                v-show="dataInfo.source_id"
              >
                <md-card-content>
                  <table class="info-table">
                    <caption>
                      {{
                        getLangText(label.dataInfo)
                      }}
                    </caption>
                    <tr>
                      <td>ID:</td>
                      <td>{{ dataInfo.source_id }}</td>
                    </tr>
                    <tr>
                      <td>{{ getLangText(label.dataWay) }}:</td>
                      <td>
                        {{
                          dataInfo.source_type == 1
                            ? "JSON"
                            : dataInfo.source_type == 2
                            ? "MySQL"
                            : "URL"
                        }}
                      </td>
                    </tr>
                    <tr>
                      <td>{{ getLangText(label.title) }}:</td>
                      <td>{{ dataInfo.title }}</td>
                    </tr>
                    <tr>
                      <td>{{ getLangText(label.detail) }}:</td>
                      <td>{{ dataInfo.detail ? dataInfo.detail : "--" }}</td>
                    </tr>
                    <tr>
                      <td>{{ getLangText(label.updateTime) }}:</td>
                      <td>{{ dataInfo.update_time }}</td>
                    </tr>
                  </table>
                </md-card-content>
              </md-card>
              <!-- 选择数据包 end -->
              <div style="text-align:center;" v-show="dataInfo.source_id">
                <md-button
                  class="md-primary md-raised"
                  @click="loadDataSource()"
                  >{{ getLangText(label.getData) }}</md-button
                >
                <md-button
                  class="md-accent md-raised"
                  @click="viewDataSource"
                  >{{ getLangText(label.view) }}</md-button
                >
              </div>
            </div>
            <!-- 数据属性 start -->
            <div
              style="width:300px;overflow-x:auto;overflow-y:hidden;"
              v-show="dataAttr.length > 0"
            >
              <md-table md-fixed-header v-model="dataAttr">
                <md-table-row slot="md-table-row" slot-scope="{ index }">
                  <md-table-cell :md-label="getLangText(label.code)">
                    <span style="min-width:80px;display:inline-block;">{{
                      dataAttr[index].code
                    }}</span>
                  </md-table-cell>
                  <md-table-cell :md-label="getLangText(label.name)">
                    <span style="min-width:80px;display:inline-block;">{{
                      dataAttr[index].name
                    }}</span>
                  </md-table-cell>
                  <md-table-cell :md-label="getLangText(label.type)">
                    <span style="min-width:60px;display:inline-block;">{{
                      dataAttr[index].type
                    }}</span>
                  </md-table-cell>
                </md-table-row>
              </md-table>
            </div>
            <!-- 数据属性 end -->
          </div>
        </md-list-item>
        <md-list-item md-expand v-show="dataAttr.length > 0">
          <md-icon>
            <i class="iconfont iconshuxing"></i>
          </md-icon>
          <span class="md-list-item-text">{{
            getLangText(label.chartParam)
          }}</span>
          <div
            slot="md-expand"
            :style="{
              overflowY: 'auto',
              height: listHeight,
              overflowX: 'hidden'
            }"
          >
            <!-- 选择图表类型 start -->
            <div class="icon-text-container">
              <span
                v-for="(item, idx) in chartList"
                @click="changeChart(idx)"
                :key="idx"
              >
                <md-button
                  class="md-icon-button"
                  :class="[
                    selectChartType == idx ? 'md-primary' : '',
                    'md-icon-button'
                  ]"
                >
                  <i :class="['iconfont', item.icon]"></i>
                </md-button>
                <span
                  :class="[
                    selectChartType == idx ? 'md-primary-text' : '',
                    'md-body-1'
                  ]"
                  >{{ getLangText(item) }}</span
                >
              </span>
            </div>
            <!-- 选择图表类型 end -->

            <!-- 设置变量 start -->
            <!-- 折线图和柱形图数据设置 -->
            <div v-if="selectChartType == 0 || selectChartType == 1">
              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.category) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="linebarData.category"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  class="md-primary"
                  v-show="item.code != linebarData.value.code"
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.value) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-checkbox
                  v-model="linebarData.value"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != linebarData.category.code &&
                      item.type == 'number'
                  "
                  >{{ item.name }}</md-checkbox
                >
              </div>
            </div>
            <!-- 散点图数据设置  -->
            <div v-if="selectChartType == 3">
              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">X{{ getLangText(label.axis) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="scatterData.x"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  class="md-primary"
                  v-show="
                    item.code != scatterData.y.code && item.type == 'number'
                  "
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">Y{{ getLangText(label.axis) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="scatterData.y"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != scatterData.x.code && item.type == 'number'
                  "
                  >{{ item.name }}</md-radio
                >
              </div>
            </div>
            <!-- 饼图数据设置 漏斗 字符云 仪表盘  -->
            <div
              v-if="
                selectChartType == 2 ||
                  selectChartType == 7 ||
                  selectChartType == 8 ||
                  selectChartType == 9
              "
            >
              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.name) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="pieData.name"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  class="md-primary"
                  v-show="item.code != pieData.value.code"
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.value) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="pieData.value"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != pieData.name.code && item.type == 'number'
                  "
                  >{{ item.name }}</md-radio
                >
              </div>
            </div>
            <!-- 雷达数据设置 -->
            <div v-if="selectChartType == 4">
              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.name) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="radarData.name"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  class="md-primary"
                  v-show="item.code != radarData.max.code"
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.max) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="radarData.max"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != radarData.name.code && item.type == 'number'
                  "
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.value) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-checkbox
                  v-model="radarData.value"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  class="md-primary"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != radarData.max.code &&
                      item.code != radarData.name.code &&
                      item.type == 'number'
                  "
                  >{{ item.name }}</md-checkbox
                >
              </div>
            </div>
            <!-- 树形图数据设置 -->
            <div v-if="selectChartType == 5">
              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.name) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="treeData.name"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  class="md-primary"
                  v-show="
                    item.code != treeData.node.code &&
                      item.code != treeData.value.code
                  "
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.node) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="treeData.node"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != treeData.name.code &&
                      item.code != treeData.value.code
                  "
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.value) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="treeData.value"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  class="md-primary"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != treeData.node.code &&
                      item.code != treeData.name.code
                  "
                  >{{ item.name }}</md-radio
                >
              </div>
            </div>

            <div v-if="selectChartType == 6">
              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.map) }}</div>
              </md-toolbar>
              <md-field style="margin:0 8px;width:calc(100% - 16px)">
                <label>{{ getLangText(label.map) }}</label>
                <md-select v-model="mapData.map">
                  <md-option
                    v-for="item in mapList"
                    :value="item.name"
                    :key="item.name"
                    >{{ getLangText(item) }}</md-option
                  >
                </md-select>
              </md-field>
              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.name) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="mapData.name"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  class="md-primary"
                  v-show="item.code != mapData.value.code"
                  >{{ item.name }}</md-radio
                >
              </div>
              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.value) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="mapData.value"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  class="md-primary"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != mapData.name.code && item.type == 'number'
                  "
                  >{{ item.name }}</md-radio
                >
              </div>
            </div>

            <!-- 关系图 -->

            <div v-if="selectChartType == 10">
              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.name) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="relateData.name"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  class="md-primary"
                  v-show="
                    item.code != relateData.x.code &&
                      item.code != relateData.y.code &&
                      item.code != relateData.target.code &&
                      item.code != relateData.source.code &&
                      item.code != relateData.value.code &&
                      item.code != relateData.edge.code
                  "
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">x</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="relateData.x"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != relateData.y.code &&
                      item.code != relateData.name.code &&
                      item.code != relateData.target.code &&
                      item.code != relateData.source.code &&
                      item.type == 'number' &&
                      item.code != relateData.value.code &&
                      item.code != relateData.edge.code
                  "
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">y</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="relateData.y"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  class="md-primary"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != relateData.name.code &&
                      item.code != relateData.x.code &&
                      item.code != relateData.target.code &&
                      item.code != relateData.source.code &&
                      item.type == 'number' &&
                      item.code != relateData.value.code &&
                      item.code != relateData.edge.code
                  "
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.source) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="relateData.source"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != relateData.x.code &&
                      item.code != relateData.y.code &&
                      item.code != relateData.target.code &&
                      item.code != relateData.name.code &&
                      item.code != relateData.value.code &&
                      item.code != relateData.edge.code
                  "
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.target) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="relateData.target"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  class="md-primary"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != relateData.x.code &&
                      item.code != relateData.y.code &&
                      item.code != relateData.name.code &&
                      item.code != relateData.source.code &&
                      item.code != relateData.value.code &&
                      item.code != relateData.edge.code
                  "
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">{{ getLangText(label.value) }}</div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="relateData.value"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != relateData.x.code &&
                      item.code != relateData.y.code &&
                      item.code != relateData.target.code &&
                      item.code != relateData.name.code &&
                      item.type == 'number' &&
                      item.code != relateData.edge.code
                  "
                  >{{ item.name }}</md-radio
                >
              </div>

              <md-toolbar class="md-dense" md-elevation="0">
                <div class="md-body-1">
                  {{ getLangText(label.edge) + getLangText(label.value) }}
                </div>
              </md-toolbar>
              <div style="white-space:normal;padding:0 8px;">
                <md-radio
                  v-model="relateData.edge"
                  :value="item"
                  v-for="item in dataAttr"
                  :key="item.code"
                  class="md-primary"
                  style="width:50%;margin-right:0;"
                  v-show="
                    item.code != relateData.x.code &&
                      item.code != relateData.y.code &&
                      item.code != relateData.name.code &&
                      item.code != relateData.source.code &&
                      item.type == 'number' &&
                      item.code != relateData.value.code
                  "
                  >{{ item.name }}</md-radio
                >
              </div>
            </div>

            <!-- 设置变量 end -->
            <div style="text-align:center" v-if="selectChartType >= 0">
              <md-button
                class="md-raised md-primary"
                @click="createChartData()"
                >{{ getLangText(label.createDefaultChart) }}</md-button
              >
            </div>
          </div>
        </md-list-item>
        <md-list-item
          md-expand
          v-if="theChart"
          :md-expanded.sync="isShowChartOp"
        >
          <md-icon>
            <i class="iconfont iconchart"></i>
          </md-icon>
          <span class="md-list-item-text">{{
            getLangText(label.chartOption)
          }}</span>
          <div
            slot="md-expand"
            :style="{
              overflowY: 'auto',
              height: listHeight,
              overflowX: 'hidden'
            }"
          >
            <div style="padding:0 8px;">
              <md-field>
                <label>{{ getLangText(label.theme) }}</label>
                <md-select v-model="selectTheme">
                  <md-option
                    v-for="item in themeList"
                    :key="item.name"
                    :value="item.name"
                    >{{ getLangText(item) }}</md-option
                  >
                </md-select>
              </md-field>
              <div
                style="color:var(--md-theme-default-primary, rgba(0, 0, 0, 0.12));white-space:normal;"
                class="md-body-1"
                v-if="selectTheme"
              >
                {{ getLangText(label.themeTip) }}
              </div>

              <md-field>
                <label>{{ getLangText(label.chartTitle) }}</label>
                <md-input v-model="chartTitle"></md-input>
              </md-field>
              <div
                style="color:red;white-space:normal;"
                class="md-body-1"
                v-if="!chartTitle || chartTitle.length < 2"
              >
                {{ getLangText(label.titleError) }}
              </div>
            </div>
            <component
              :is="'bi-' + chartList[selectChartType].name"
              :option="baseOption"
              :lang-type="langType"
              @create-chart="createChart"
            ></component>
          </div>
        </md-list-item>
      </md-list>
    </div>
    <div class="list-body">
      <md-toolbar class="md-dense" md-elevation="0">
        <span class="md-title" v-if="selectChartType >= 0">{{
          getLangText(chartList[selectChartType])
        }}</span>
        <span class="md-body-1" v-if="chartId" style="margin-left:16px;"
          >ID:{{ chartId }}</span
        >
        <span
          class="md-toolbar-section-end"
          style="display:inline-flex;align-items:center;"
        >
          <span
            @click="fullScreen"
            style="display:inline-flex;align-items:center;"
          >
            <md-button class="md-icon-button" @keydown.esc="fullScreen">
              <i
                :class="[
                  'iconfont',
                  isFullscreen ? 'icontuichuquanping' : 'iconquanping'
                ]"
              ></i>
            </md-button>
            {{
              getLangText(
                isFullscreen ? label.exitFullscreen : label.fullScreen
              )
            }}
          </span>
          <span
            @click="saveChart"
            style="display:inline-flex;align-items:center;"
            v-if="theChart && !chartId"
          >
            <md-button class="md-icon-button">
              <i class="iconfont iconsave"></i>
            </md-button>
            {{ getLangText(label.save) }}
          </span>
          <span
            @click="updateChart"
            style="display:inline-flex;align-items:center;"
            v-if="chartId"
          >
            <md-button class="md-icon-button">
              <i class="iconfont iconupdate"></i>
            </md-button>
            {{ getLangText(label.update) }}
          </span>
          <span
            @click="newChart"
            style="display:inline-flex;align-items:center;"
            v-if="chartId"
          >
            <md-button class="md-icon-button">
              <i class="iconfont iconplus-creat"></i>
            </md-button>
            {{ getLangText(label.create) }}
          </span>
          <span
            @click="exportChart"
            style="display:inline-flex;align-items:center;"
            v-if="dataList.length > 0"
          >
            <md-button class="md-icon-button">
              <i class="iconfont iconexport"></i>
            </md-button>
            {{ getLangText(label.export) }}
          </span>
        </span>
      </md-toolbar>
      <div
        class="chart-card"
        style="height:calc(100% - 48px)"
        id="the_chart_card"
      >
        <div class="chart-card-header1 md-title">{{ chartTitle }}</div>
        <div class="chart-card-content" id="the_chart_content"></div>
      </div>
    </div>
    <md-dialog-alert
      :md-active.sync="isAlert"
      :md-content="alertTip"
      md-confirm-text="OK"
    />
  </div>
</template>
<script src="@/components/js/chartEditor.js"></script>
<style lang="scss" scoped>
#the_chart_editor {
  display: flex;
  flex-direction: row;
  height: 100%;
  background: white;
}
.list {
  display: inline-flex;
  width: 300px;
  height: 100%;
  overflow-y: auto;
  border-right: solid 1px rgba(0, 0, 0, 0.12);
}
.list-body {
  display: inline-flex;
  width: calc(100% - 300px);
  height: 100%;
  flex-direction: column;
}
.list-item {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  height: 48px;
  align-items: center;
  padding: 0 8px;
  > i {
    margin-right: 8px;
  }
  > span.list-item-text {
    width: 80px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  > span.list-item-tip {
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
  }
}
.list-item:hover {
  background: rgba(0, 0, 0, 0.12);
}
.list-container {
  width: 100%;
  height: auto;
}
.md-list {
  padding: 0;
}
.md-tabs {
  overflow-x: hidden;
  overflow-y: hidden;
}
.md-tab {
  padding: 0;
}

.icon-text-container {
  text-align: left;
  word-break: break-all;
  white-space: normal;

  > span {
    width: 33%;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
